﻿@{
    ViewBag.Title = "Options";
    Layout = "~/Views/Shared/MobileLayout.cshtml";
}

<script>
    $(function () {
        $('#date').datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function (dateText, inst) {
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $(this).datepicker('setDate', new Date(year, month, 1));
            },
            beforeShow: function (input, inst) {
                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length - 4, datestr.length);
                    month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $(this).datepicker('option', 'monthNames'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            }
        });

        $('#f_date').datepicker();
        $('#t_date').datepicker();

        $('#numYear').spinner();
    });
    
</script>

<p class="data_title t_corner4">&nbsp&nbsp&nbsp&nbsp&nbsp Lựa chọn</p>
<div class="data_show">
    <table style="margin-left:10px;">
        <tr>
            <td class="col_op"><input type="radio" checked="checked" name="grp" id="op_day" style="width:24px;height:24px;"/></td>
            <td><p class="ops hand_cursor" id="op_day_text" onclick="op_day_click();"> Trong ngày </p></td>
        </tr>
        <tr>
            <td></td>
            <td><p> Truy vấn dữ liệu mới nhất trong ngày.</p></td>
        </tr>
    
        <tr>
            <td class="col_op"><input type="radio" name="grp" id="op_week"/>
            </td>
            <td><p class="ops hand_cursor" onclick="op_week_click();">  Trong tuần </p></td>
        </tr>
        <tr>
            <td></td>
            <td><p> Truy vấn dữ liệu trong tuần hiện tại.</p></td>
        </tr>

        <tr>
            <td class="col_op"><input type="radio" name="grp" id="op_month"/>
            </td>
            <td><p class="ops hand_cursor" onclick="op_month_click();">  Trong tháng </p></td>
        </tr>
        <tr>
            <td></td>
            <td><p> Truy vấn dữ liệu trong tháng được lựa chọn.</p></td>
        </tr>

        <tr>
            <td></td>
            <td><input id='date' name="bday" class="datepicker"></td>
        </tr>
        
        <tr>
            <td class="col_op"><input type="radio" name="grp" id="op_year"/></td>
            <td><p class="ops hand_cursor" onclick="op_year_click();">  Trong năm </p></td>
        </tr>
        <tr>
            <td></td>
            <td><p> Truy vấn dữ liệu trong năm được lựa chọn.</p></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="numYear" style="min-width:140px;min-height:20px;"></td>
        </tr>

        <tr>
            <td class="col_op"><input type="radio" name="grp" id="op_bytime"/></td>
            <td><p class="ops hand_cursor" onclick="op_bytime_click();">  Theo thời gian </p></td>
        </tr>
        <tr>
            <td></td>
            <td><p> Truy vấn dữ liệu theo khoảng thời gian được lựa chọn.</p></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="f_date" name="fromDate" class="datepicker"></td>
        </tr>
        <tr>
            <td></td>
            <td><input id="t_date" name="toDate" class="datepicker"></td>
        </tr>
    </table>  
    <input type="button" value="Chấp nhận"/>
</div>